<template>
    <view class="commodity">
        <!-- 单个商品组件 -->
        <view class="commodity-item" v-for="(item,index) in dataList" :key="index" @click="detailClick(item)">
            <view class="commodity-img">
                <image :src="item.cover" mode="widthFix"></image>
            </view>
            <view>
                <view class="commodity-content">
                    <text class="commodity-name">{{item.name}}</text>
                </view>
                <!-- <text class="commodity-disc">{{item.disc}}</text> -->
                <view class="commodity-detail">
                    <view>
                        <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                        <view class="commodity-price">￥{{item.price_selling}}</view>
                    </view>

                    <text class="commodity-count">已售{{item.stock_virtual}}件</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        dataList: Array
    },
    data() {
        return {

        }
    },
    created() {

    },
    methods: {
        detailClick(item) {
            uni.navigateTo({
                url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(item.code) + "&invite=" + (uni.getStorageSync(
                    "invite_code") || '')
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.commodity {
  padding: 15rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.commodity-item {
  width: 45%;
  /* height:450rpx; */
  padding-bottom: 30rpx;
  margin: 0 15rpx 30rpx 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 10rpx;
  /* margin-bottom: 30rpx; */
  /* border-left: 1rpx solid #efefef; */
}
.commodity-img {
  width: 100%;
  //   height: 60%;
  height: 250rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.commodity-img image {
  //   width: 330rpx;
  height: 250rpx;
}
/* .commodity-content {
		text-align: center;
	} */
.commodity-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 45rpx;
  word-break: break-all;
  padding: 9rpx 15rpx;
  font-size: 30rpx;
  margin-top: 10rpx;
}
.ret-yuans {
  color: #a6a8ae;
  font-size: 28rpx;
  margin-left: 6rpx;
  text-decoration: line-through;
}
.commodity-disc {
  border-radius: 4rpx;
  background: #efefef;
  padding: 5rpx 20rpx;
  font-size: 24rpx;
  color: #7f8699;
  text-align: left;
  margin-left: 15rpx;
  margin-top: 9rpx;
}
.commodity-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 15rpx;
  width: 300rpx;
  margin-top: 10rpx;
}

.commodity-price {
  color: #ff0000;
  font-size: 28rpx;
}

.commodity-count {
  color: #999999;
  font-size: 26rpx;
}
</style>
